<template>
    <section class="tank-fight" ref="tank-fight">
        <div class="ammunition-amount _bullet">
            <img src="./images/bullet.png" />
            <span>{{bulletsAmount}}</span>
        </div>
        <div class="ammunition-amount _missile">
            <img src="./images/rocket.png" />
            <span>{{rocketAmount}}</span>
        </div>
        <div class="game-status" v-if="gameStatus" @click="startGame">
            <span v-if="loading" class="loading-message"><i class="el-icon-loading"></i>{{loadingMessage}}</span>
            <span v-else class="game-start">{{startTitle}}</span>
        </div>
        <div class="mask" v-if="gameStatus"></div>
        <span v-if="eyesLoading" style="position: absolute; color: #fff; top: 10px; left: 10px; z-index: 10;">正在连接眼动仪...</span>
    </section>
</template>
<script>
import Vue from 'vue'
import {remote} from 'electron'
import fs from 'fs'
import { getVectorIncludedAngle,getRandomFromTwo,getLengthFromTwoPoint,hitRectangle,isInsidePolygon  } from '../public/util.js'
import * as PIXI from 'pixi.js'
import {Howl, Howler} from 'howler';
import tween from './tween.js'

console.log(remote.getCurrentWindow());

const WINDOW_WIDTH = window.innerWidth;
const WINDOW_HEIGHT = window.innerHeight;
const towerPivot = [30,24];
const BULLET_SPEED = 30;
const soundGun = new Howl({src: "static/music/gun.mp3"});
const soundGunHit = new Howl({src: "static/music/gun-hit.mp3"});
const soundGunload = new Howl({src: "static/music/gunload.mp3"});
const soundMissile = new Howl({src: "static/music/missile.mp3"});
const soundMissileload = new Howl({src: "static/music/missileload.mp3"});
const soundTankExplosion = new Howl({src: "static/music/tank-explosion.mp3"});
const soundRobotExplosion = new Howl({src: "static/music/robot-explosion.mp3"});
const noBullets = new Howl({src: "static/music/no-bullets.mp3"});
const startGame = new Howl({src: "static/music/start-game.mp3"});
const success = new Howl({src: "static/music/success.mp3"});
const fail = new Howl({src: "static/music/fail.mp3"});


const NUMBER_FIGURE = [
    [[0,0],[0,32],[0,64],[0,96],[0,128]],
    [[0,0],[0,32],[0,64],[0,96],[0,128],[32,0],[32,128],[64,0],[64,32],[64,64],[64,96],[64,128]],
    [[0,0],[0,64],[0,96],[0,128],[32,0],[32,64],[32,128],[64,0],[64,32],[64,64],[64,128]],
    [[0,0],[0,32],[0,64],[32,64],[64,0],[64,32],[64,64],[64,96],[64,128]]
]

const GRASS_FIGURE = [[0,0],[0,1],[0,2],[0,3],[0,4],[0,5],[1,0],[2,0],[3,0], [-1,1],[-1,2], [0,-1],[1,-1],[2,-1],[2,-2]];

const WALL_FIGURE = [[0,6],[1,6],[-3,0],[-3,1],[-3,2],[-3,3],[-3,4], [-3,-1],[-3,-2],[-3,-3],[-4,-1],[-4,-2],[-4,-3],[4,-1],[5,-1],[6,-1],[7,-1],[8,-1],[8,-2]];


var sys;

window.moveTest = function(p){
    sys.startCollimationAnimate(p)
}

export default {
    name: 'tankFight',
    components: {

    },
    props: [],
    data () {
        return {
            gameApp: null,
            loader: null,
            gameConfig: {
                width: 0,
                height: 0
            },

            //元素
            sceneBlock: null,
            tower: null, //炮塔
            towerShell: null, //炮塔炮弹
            enemyTanks: null, //敌方坦克
            enemyTanksNumber: 15,
            collimation: null,//准星
            bullets: null, //炮弹合集
            soldiers: null, //士兵
            weaponDamageValue: {
                "gun": 1,
                "missile": 12
            },

            //眼动仪
            socket: null,
            socketDestory: false,
            collimationAnimate: false,
            collimationAnimateRate: 0,
            collimationAnimateAmount: 20,
            eyeX: 0,
            eyeY: 0,

            bulletsAmount: 800,
            rocketAmount: 50,

            gameStatus: true,
            loading: false,
            loadingMessage: "资源加载中...",
            startTitle: "Start Game",
            gameRuning: false,

            eyesLoading: true,


        }
    },
    created() {

    },
    beforeMount () {

    },
    mounted() {
        sys = this;
        this.initGame();
    },
    methods: {
        initGame(){
            let $scene = this.$refs["tank-fight"];
            //const defaultIcon = "url('static/assets/collimation.png'),auto";
            this.gameConfig.width = $scene.offsetWidth;
            this.gameConfig.height = $scene.offsetHeight;
            this.gameApp = new PIXI.Application({
                width: this.gameConfig.width,
                height: this.gameConfig.height,
                transparent: true,
                antialias: false,
                resolution: 1
            });
            this.gameApp.renderer.view.style.position = "absolute";
            this.gameApp.renderer.view.style.display = "block";
            this.gameApp.renderer.autoResize = true;
            this.gameApp.renderer.resize(this.gameConfig.width, this.gameConfig.height);
            //this.gameApp.renderer.plugins.interaction.cursorStyles.default = defaultIcon;
            $scene.appendChild(this.gameApp.view);

            this.bullets = new PIXI.ParticleContainer(1000, {
                position: true,
                rotation: true
            });
            this.enemyTanks = new PIXI.Container();
            this.soldiers = new PIXI.Container();
            this.sceneBlock = new PIXI.Container();
            this.gameApp.stage.addChild(this.sceneBlock,this.bullets,this.enemyTanks,this.soldiers);

            this.gameStatus = true;
            this.loading = true;
            this.loadingMessage = "资源加载中";

            this.loader = new PIXI.Loader();
            this.loader
            .add("spritesheet","http://localhost:9080/static/assets/warMachine.json")
            .add("explode","static/assets/explode.json")
            .add("robot-explode","static/assets/robot-explode.json")
            .add("hitSpark","static/assets/hitSpark.json")
            .add("collimation","static/assets/collimation.png")
            .add("bullet","static/assets/bullet.json")
            .add("soldier","static/assets/soldier.json")
            .load(this.setup)

        },
        setup(){
            console.log(this.gameApp.screen)
            //建立场景
            this.initScene();
            //炮塔底座
            let towerBase = new PIXI.Sprite(this.loader.resources["spritesheet"].textures["tower_bg.png"]);
            towerBase.x = this.gameConfig.width/2 - towerBase.width/2;
            towerBase.y = this.gameConfig.height - towerBase.height;
            this.gameApp.stage.addChild(towerBase);
            //创建炮塔
            this.tower = new PIXI.Sprite(this.loader.resources["spritesheet"].textures["gun.png"]);
            this.tower.weapon = "gun";
            this.tower.x = this.gameConfig.width/2;
            this.tower.y = this.gameConfig.height - (this.tower.height/2+22);
            //this.tower.pivot.set(...towerPivot);
            this.tower.anchor.set(0.5,0.5);
            this.tower.rotation = -Math.PI/2;
            this.gameApp.stage.addChild(this.tower);
            //准星
            this.collimation = new PIXI.Sprite(this.loader.resources["collimation"].texture);
            this.collimation.anchor.set(0.5,0.5);
            this.collimation.x = 100;
            this.collimation.y = 100;
            this.collimation.ox = 100;
            this.collimation.oy = 100;
            this.gameApp.stage.addChild(this.collimation);

            //事件驱动
            this.bindEvent();
            this.gameApp.start();

            this.loading = false;
            this.startTitle = "Start Game";
            //眼动仪开启
            this.startSocket();

            window.onbeforeunload=(e)=>{
                console.log("关闭------")
                this.close();
            }

        },
        initScene(){
            for(let i=0;i<NUMBER_FIGURE.length;i++){
                NUMBER_FIGURE[i].map(item=>{
                    let block = new PIXI.Sprite(this.loader.resources["spritesheet"].textures["wall-block.png"]);
                    block.x = (item[0] + this.getDistanceX(i))*2;
                    block.y = (item[1] + 32*4)*2;
                    this.sceneBlock.addChild(block);
                })
            }

            GRASS_FIGURE.map(item=>{
                let block = new PIXI.Sprite(this.loader.resources["spritesheet"].textures["grass-block.png"]);
                block.x = item[0]>=0?item[0]*64:this.gameConfig.width + item[0]*64;
                block.y = item[1]>=0?item[1]*64:this.gameConfig.height + item[1]*64;
                this.sceneBlock.addChild(block);
            })

            WALL_FIGURE.map(item=>{
                let block = new PIXI.Sprite(this.loader.resources["spritesheet"].textures["wall-block.png"]);
                block.x = item[0]>=0?item[0]*64:this.gameConfig.width + item[0]*64;
                block.y = item[1]>=0?item[1]*64:this.gameConfig.height + item[1]*64;
                this.sceneBlock.addChild(block);
            })


        },
        startGame(){
            if(this.loading){
                return
            }

            this.gameStatus = false;
            startGame.play();

            if(this.enemyTanks.children.length>0){
                this.enemyTanks.removeChildren(0,this.enemyTanks.children.length);
            }
            //创建敌方坦克
            this.initEnemyTanks();
            //创建敌方士兵
            this.initEnemySoldiers();
            //子弹
            this.bulletsAmount = 300;
            this.rocketAmount = 50;
            this.gameRuning = true;
            this.gameApp.start();

            this.changeWeapon(1);
        },
        getDistanceX(index){
            switch(index){
                case 0:
                    return 32*8;
                case 1:
                    return 32*11;
                case 2:
                    return 32*16;
                case 3:
                    return 32*21;
            }
        },
        initEnemyTanks(){
            // let tank = new PIXI.Sprite(this.loader.resources["spritesheet"].textures[`tank_${getRandomFromTwo(1,4)}.png`]);
            // tank.x = this.gameConfig.width-30;
            // tank.y = 800;
            // tank.rotation = Math.PI/2;
            // tank.anchor.set(0.5,0.5);
            // tank.enemyType = "tank";
            //     tank.heathValue = 10;
            //     tank.speed = 0.5;
            // this.enemyTanks.addChild(tank);
            // return
            for(let i=0;i<this.enemyTanksNumber;i++){
                let tank = new PIXI.Sprite(this.loader.resources["spritesheet"].textures[`tank_${getRandomFromTwo(1,4)}.png`]);
                tank.x = getRandomFromTwo(30,this.gameConfig.width - 100);
                tank.y = -getRandomFromTwo(100,500);
                tank.rotation = Math.PI/2;
                tank.anchor.set(0.5,0.5);
                tank.enemyType = "tank";
                tank.heathValue = 10;
                tank.speed = 0.3;
                this.enemyTanks.addChild(tank);
            }
        },
        initEnemySoldiers(){
            // let soldier = new PIXI.AnimatedSprite(this.loader.resources["soldier"].spritesheet.animations["soldier"]);
            // soldier.x = 100;
            // soldier.y = 100;
            // soldier.animationSpeed = 0.1;
            // soldier.anchor.set(0.5,0.5);
            // soldier.play();
            // soldier.enemyType = "soldier";
            // soldier.heathValue = 3;
            // soldier.speed = 0.2;
            // this.enemyTanks.addChild(soldier);
            // setTimeout(()=>{
            //     soldier.textures = this.loader.resources["bullet"].spritesheet.animations["bullet"];
            // },3000)

            // return
            for(let i=0;i<10;i++){
                let soldier = new PIXI.AnimatedSprite(this.loader.resources["soldier"].spritesheet.animations["soldier"]);
                soldier.x = getRandomFromTwo(30,this.gameConfig.width - 100);
                soldier.y = getRandomFromTwo(0,200);
                soldier.animationSpeed = 0.1;
                soldier.anchor.set(0.5,0.5);
                soldier.play();
                soldier.enemyType = "soldier";
                soldier.heathValue = 3;
                soldier.speed = 0.2;
                this.enemyTanks.addChild(soldier);
            }
        },
        creatBullet(){//bullet_1.png
            let bullet;
            if(this.tower.weapon == "gun"){
                bullet = new PIXI.Sprite(this.loader.resources["spritesheet"].textures[`bullet_1.png`]);
                bullet.parentWeapon = "gun";
            }else{
                bullet = new PIXI.AnimatedSprite(this.loader.resources["bullet"].spritesheet.animations["bullet"]);
                bullet.parentWeapon = "missile";
                bullet.loop = true;
                bullet.animationSpeed = 0.8;
                bullet.play();
            }

            console.log(bullet.width,bullet.height,"----飞弹");
            bullet.anchor.set(0.5,0.5);
            //计算发射点
            const R = this.tower.width - towerPivot[0] + (bullet.width/2 + 5);
            bullet.x = this.tower.x + R*Math.cos(-this.tower.rotation);
            bullet.y = this.tower.y - R*Math.sin(-this.tower.rotation);
            //console.log(bullet.x,bullet.y)
            bullet.rotation = this.tower.rotation;
            //bullet.pivot.set(bullet.width/2, bullet.height/2);

            //计算弹道参数
            // const k = (this.collimation.y - this.tower.y)/(this.collimation.x - this.tower.x);
            // const b = this.collimation.y - k*this.collimation.x;
            // bullet.ballistic = {k: k, b: b};

            return bullet
        },
        createhitSpark(x,y){
            console.log("创建撞击火花")
            soundGunHit.play();
            let hitSpark = new PIXI.AnimatedSprite(this.loader.resources["hitSpark"].spritesheet.animations["hit-spark"]);

            hitSpark.x = x;
            hitSpark.y = y;
            hitSpark.animationSpeed = 0.4;
            hitSpark.loop = false;
            hitSpark.anchor.set(0.5,0.5);
            hitSpark.play();
            this.gameApp.stage.addChild(hitSpark);
            hitSpark.onComplete = ()=>{
                hitSpark.visible = false;
                this.gameApp.stage.removeChild(hitSpark);
                hitSpark.destroy();
            }
        },
        creatExplosion(x,y,type){
            let explosion;
            if(type == "tank"){
                soundTankExplosion.play();
                explosion = new PIXI.AnimatedSprite(this.loader.resources["explode"].spritesheet.animations["explode"]);
            }else if(type == "soldier"){
                soundRobotExplosion.play();
               explosion = new PIXI.AnimatedSprite(this.loader.resources["robot-explode"].spritesheet.animations["robot-explode"]);
            }
            explosion.x = x;
            explosion.y = y;
            explosion.animationSpeed = type == "tank"?0.4:0.2;
            explosion.loop = false;
            explosion.anchor.set(0.5,0.5);
            explosion.play();
            this.gameApp.stage.addChild(explosion);
            explosion.onComplete = ()=>{
                explosion.visible = false;
                this.gameApp.stage.removeChild(explosion);
                explosion.destroy();
            }
        },
        bindEvent(){
            // this.gameApp.stage.interactive = true;
            // this.gameApp.stage.on('mousemove',(e)=>{
            //     console.log(e,'323232')
            // })
            // this.$refs["tank-fight"].addEventListener("mousemove",(e)=>{
            //     let point = this.windowToWrap(e.clientX, e.clientY);
            //     this.collimation.x = point.x;
            //     this.collimation.y = point.y;
            //     let angle = getVectorIncludedAngle(point,{x: this.tower.x+10, y: this.tower.y},{x: this.tower.x,y:this.tower.y});
            //     this.tower.rotation = -angle;

            // })

            document.addEventListener("keydown",(e)=>{
                if(!this.gameRuning){
                    return
                }
                console.log(e.keyCode)
                if(e.keyCode == 32){
                    this.bulletLaunch();
                }else if(e.keyCode == 49){
                    this.changeWeapon(1);
                }else if(e.keyCode == 50){
                    this.changeWeapon(2);
                }
            })
            this.gameApp.ticker.add((delta) => {
               //飞弹飞行
                if(this.bullets.children.length>0){
                    this.bulletMove();
                }
            })
            this.gameApp.ticker.add((delta) => {
                //坦克行走
                if(this.enemyTanks.children.length>0){
                    this.tanksMoving();
                }
            })
            this.gameApp.ticker.add((delta) => {
                //碰撞检测
                if(this.enemyTanks.children.length>0&&this.bullets.children.length>0){
                    this.checkTanksHit();
                }
            })
            this.gameApp.ticker.add((delta) => {
                //准星动画
                if(this.collimationAnimate){
                    this.collimationMove(delta);
                }
            })

            this.gameApp.ticker.add((delta) => {
                //失败成功检测
                if(this.gameRuning){
                    let enemy = this.enemyTanks.children;
                    if(enemy.length == 0){
                        this.gameApp.stop();
                        this.gameStatus = true;
                        this.gameRuning = false;
                        this.startTitle = "success! click to restart"
                        success.play();
                        return
                    }
                    for(let i=0;i<enemy.length;i++){
                       // console.log(enemy[i].y,this.gameConfig.height,"Y轴")
                        if(enemy[i].y>(this.gameConfig.height + 20)){
                            console.log("失败")
                            this.gameApp.stop();
                            this.gameStatus = true;
                            this.gameRuning = false;
                            this.startTitle = "Fail! click to retry"
                            fail.play();
                            break;
                        }
                    }

                }
            })
            //计时操作
            // setInterval(()=>{
            //     console.log(this.enemyTanks.children.length)
            //     if(this.enemyTanks.children.length>0){
            //         this.checkTanksHit();
            //     }
            // },50)

        },
        gameLoop(delta){
            //飞弹飞行
            if(this.bullets.children.length>0){
                this.bulletMove();
            }

            //坦克行走
            if(this.enemyTanks.children.length>0){
                this.tanksMoving();
            }

            //console.log(this.bullets.children.length);
            if(this.enemyTanks.children.length>0&&this.bullets.children.length>0){
                this.checkTanksHit();
            }

            //准星动画
            if(this.collimationAnimate){
                this.collimationMove(delta);
            }
        },
        changeWeapon(type){
            if(type == 1){
                this.tower.texture = this.loader.resources["spritesheet"].textures["gun.png"];
                this.tower.anchor.set(0.26,0.5);
                this.tower.weapon = "gun";
                soundGunload.play();
            }else if(type == 2){
                this.tower.texture = this.loader.resources["spritesheet"].textures["tower.png"];
                this.tower.anchor.set(0.5,0.5);
                this.tower.weapon = "missile";
                soundMissileload.play();
            }
        },
        tanksMoving(){
            for(let item of this.enemyTanks.children){
                if(item.x>this.gameConfig.width||item.y>(this.gameConfig.height+50)){
                    this.enemyTanks.removeChild(item);
                    item.destroy();
                }else{
                    item.y += item.speed;
                }

            }
        },
        collimationMove(delta){
            //collimationAnimate: false,
            //collimationAnimateRate: 0,
            //collimationAnimateAmount: 30,
            this.collimationAnimateRate = this.collimationAnimateRate + delta;
            if(this.collimationAnimateRate<this.collimationAnimateAmount){
                //t当前时间，b初始值，c变化量，d持续时间
                let t = this.collimationAnimateRate,
                    bx = this.collimation.ox,
                    by = this.collimation.oy,
                    cx = this.eyeX - this.collimation.ox,
                    cy = this.eyeY - this.collimation.oy,
                    d = this.collimationAnimateAmount;
                this.collimation.x = tween.Quad.easeOut(t,bx,cx,d);
                this.collimation.y = tween.Quad.easeOut(t,by,cy,d);
            }else{
                this.collimationAnimate = false;
                this.collimationAnimateRate = 0;
                this.collimation.ox = this.collimation.x;
                this.collimation.oy = this.collimation.y;
            }

            //炮塔调整
            let angle = getVectorIncludedAngle({x: this.collimation.x, y: this.collimation.y},{x: this.tower.x+10, y: this.tower.y},{x: this.tower.x,y:this.tower.y});
            this.tower.rotation = -angle;
        },
        checkTanksHit(){
            let bullets = this.bullets.children;
            let tanks = this.enemyTanks.children;
            for(let i=0;i<bullets.length;i++){
                let bp = this.getTransfromPointByOrgin(bullets[i].x,bullets[i].y,bullets[i].x - bullets[i].width/2, bullets[i].y, bullets[i].rotation);
                let hit = false,hitBullet;
                for(let item of tanks){
                    //获取坦克实际坐标点
                    let tp1,tp2,tp3,tp4,w,h;
                    if(item.enemyType=="tank"){
                        //tp1 = this.getTransfromPointByOrgin(item.x,item.y,item.x - item.width/2, item.y - item.height/2,item.rotation);
                        w = item.height + 6;
                        h = item.width + 6;
                    }else{
                        w = item.width + 10;
                        h = item.height + 10;
                    }

                    tp1 = {x: item.x + w/2, y: item.y - h/2};
                    tp2 = {x: tp1.x, y: tp1.y + h};
                    tp3 = {x: tp1.x - w, y: tp1.y + h};
                    tp4 = {x: tp1.x - w, y: tp1.y};
                    if(isInsidePolygon(bp,[tp1,tp2,tp3,tp4])){
                        console.log("发生碰撞---",bp,[tp1,tp2,tp3,tp4],item.x,item.y)
                        //伤害
                        item.heathValue = item.heathValue - this.weaponDamageValue[bullets[i].parentWeapon];
                        if(item.heathValue>0){
                            //伤害火花
                            this.createhitSpark(item.x,item.y);
                        }else{
                            //死亡
                            //爆炸开启
                            this.creatExplosion(item.x,item.y,item.enemyType);
                            this.enemyTanks.removeChild(item);
                            item.destroy();
                        }

                        hit = true;
                        hitBullet = bullets[i];
                        break;
                    }
                    // if(getLengthFromTwoPoint(bp,item)<=12){
                    //     console.log("发生碰撞---")
                    //     hit = true;
                    //     break;
                    // }
                }
                if(hit){
                    this.bullets.removeChild(hitBullet);
                    hitBullet.destroy();
                    break;
                }
                console.log("外循环")
            }
        },
        bulletMove(){
            this.bullets.children.map(item=>{
                //item.y -= BULLET_SPEED;
                //item.x = (item.y-item.ballistic.b)/item.ballistic.k;
                item.x = item.x + parseInt(BULLET_SPEED*Math.cos(-item.rotation));
                item.y = item.y - parseInt(BULLET_SPEED*Math.sin(-item.rotation));
                if(item.x<0||item.x>this.gameConfig.width||item.y<0||item.y>this.gameConfig.height){
                    this.bullets.removeChild(item);
                    item.destroy();
                    return
                }
            })
        },
        bulletLaunch(){
            //console.log("---飞弹发射---")
            //创建飞弹
            if(this.tower.weapon == "gun"){
                if(this.bulletsAmount<=0){
                    noBullets.play();
                    return
                }
                soundGun.play();
                this.bulletsAmount--;
            }else{
                if(this.rocketAmount<=0){
                    noBullets.play();
                    return
                }
                soundMissile.play();
                this.rocketAmount--;
            }
            let bullet = this.creatBullet()
            this.bullets.addChild(bullet);


        },
        windowToWrap(x, y) {
            var bbox = this.$refs["tank-fight"].getBoundingClientRect();
            return { x: x - bbox.left, y: y - bbox.top }
        },
        getTransfromPointByOrgin(transformOrginX, transformOrginY, x, y, angle) {
            //设定旋转中心
            let x1 = x - transformOrginX,
                y1 = y - transformOrginY;
            //旋转
            let x2 = x1 * Math.cos(angle) - y1 * Math.sin(angle),
                y2 = y1 * Math.cos(angle) + x1 * Math.sin(angle);
            //平移
            let resultX = x2 + transformOrginX,
                resultY = y2 + transformOrginY;

            return { x: parseInt(resultX), y: parseInt(resultY) }
        },
        startSocket(){
            this.eyesLoading = true;
            this.gameApp.stop();
            let _this = this;
            if ("WebSocket" in window) {
                //console.log("您的浏览器支持 WebSocket!");

                // 打开一个 web socket
                this.socket = new WebSocket("ws://127.0.0.1:9922");

                this.socket.onopen = function() {
                    _this.gameApp.start();
                    _this.eyesLoading = false;
                    _this.socket.send("run");
                };

                this.socket.onmessage = function(evt) {
                    var received_msg = evt.data;
                    _this.handleMsg(received_msg);
                };

                this.socket.onclose = function() {
                    console.log("连接已关闭");
                    //关闭 websocket
                    if(!_this.socketDestory){
                        _this.startSocket();
                        console.log("连接已关闭...,开始重连");
                    }else{
                        console.log("连接主动关闭");
                    }
                };

                this.socket.error = function() {
                    if(!_this.socketDestory){
                        _this.startSocket();
                        console.log("网络错误...,开始重连");
                    }else{
                        console.log("连接主动关闭");
                    }
                }


            } else {
                // 浏览器不支持 WebSocket
                console.error("您的浏览器不支持 WebSocket!");
            }
        },
        handleMsg(data){
            let position = JSON.parse(data).body.param.message_param;
            let x = position.position_x>0?position.position_x*window.screen.width:0;
            let y = position.position_y>0?position.position_y*window.screen.height:0;

            let point = this.windowToWrap(x, y);
            this.startCollimationAnimate(point);

        },
        startCollimationAnimate(point){
            this.eyeX = point.x;
            this.eyeY = point.y;
            this.collimationAnimate = true;


        },
        close(){
            console.log("卸载----")
            this.socketDestory = true;
            this.socket.send("stop");
            this.socket.close();
        },
    },
    watch: {

    },
    beforeDestroy() {
        this.close();
    },
}
</script>

<style lang="less">
    .tank-fight{
        width: 100%;
        height: 100%;
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            background: rgba(0,0,0,0.5);
        }
        .game-status{
            position: absolute;
            width: 340px;
            height: 67px;
            top: 50%;
            left: 50%;
            z-index: 10;
            transform: translate(-50%,-50%);
            background: url(./images/button_bg.png) no-repeat;
            background-size: 100% 100%;
            line-height: 67px;
            font-size: 12px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            i{
                font-size: 18px;
            }
            .loading-message{
                font-size: 18px;
            }
            .game-start{
                font-size: 30px;
                color: #cdb888;
            }
        }
        .ammunition-amount{
            width: 120px;
            position: absolute;
            bottom: 20px;
            z-index: 9;
            color: #fff;
            font-family: "Times New Roman";
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
            padding: 5px;
            &._bullet{
                right: 250px;
            }
            &._missile{
                right: 50px;
            }
            img{
                float: left;
                width: 50px;
                height: auto;
            }
            span{
                float: left;
                margin-left: 10px;
                font-size: 20px;
            }
        }
    }
</style>
